<script lang="ts" setup>
import { Ref, onMounted, ref, watch, computed } from "vue";
import pageHeader from "@/components/pageHeader.vue";
import i18n from "@/i18n";
import { useRoute } from "vue-router";
import { showToast } from "vant";
import navTo from "@/utils/navTo";
import { czWithdrawWithdraw, sysMailCaptchaForWithdraw } from "@/api/games";
const route = useRoute();
const emailVerificationCode = ref("");

const getEmailCode = async () => {
  const res = await sysMailCaptchaForWithdraw({});
  console.log("sysMailCaptchaForWithdraw", res.value);
};

const title = computed(() => i18n.global.t("WithdrawT21"));
const title1 = computed(() => i18n.global.t("WithdrawT3"));
const title2 = computed(
  () => i18n.global.t("WithdrawT9") + i18n.global.t("WithdrawT3")
);
const title3 = computed(() => i18n.global.t("WithdrawT4"));
const title4 = computed(
  () => i18n.global.t("WithdrawT9") + i18n.global.t("WithdrawT4")
);
const num = ref("");
const address = ref("");
// const userInfo = ref(
//   getItem("userInfo") ? JSON.parse(getItem("userInfo")) : null
// );

watch(num, (val) => {
  val = val.toString();
  if (val == "") {
    return;
  }
  val = val.replace(/^\D*([0-4]\d*\.?\d{0,4})?.*$/, "$1");
  num.value = val;
});

// 提现
const doWithdraw = async () => {
  if (address.value == "" || address.value == 0) {
    showToast(i18n.global.t("WithdrawT12"));
    return;
  }
  if (num.value == 0 || num.value == "") {
    showToast(i18n.global.t("WithdrawT13"));
    return;
  }
  if (emailVerificationCode.value == "") {
    showToast(i18n.global.t("WithdrawT22"));
    return;
  }
  try {
    let res = await czWithdrawWithdraw({
      wallet: address.value,
      product_type: 4,
      withdraw_amount: Number(num.value),
      captcha: emailVerificationCode.value,
    });
    console.log("czWithdrawWithdraw:", res.value);
  } catch (error) {}
};

const setAll = () => {
  console.log("route.query.balance", route.query.balance);
  if (route.query.balance) {
    num.value = route.query.balance || 0;
  }
};

onMounted(() => {
  if (route.query.balance) {
    num.value = route.query.balance;
  }
});
</script>

<template>
  <div class="page">
    <pageHeader>
      <template #title>{{ i18n.global.t("WithdrawT1") }}</template>
      <template #right
        ><img
          @click="navTo('/withdrawal/record')"
          class="rightInfo"
          src="@/assets/images/info.svg"
      /></template>
    </pageHeader>

    <div class="content">
      <div class="title">{{ i18n.global.t("WithdrawT2") }}</div>
      <div class="infoBox">
        <img class="img" src="@/assets/images/BSC.svg" />
        <div class="txt">BNB CHAIN</div>
      </div>
      <div class="title top30">{{ i18n.global.t("WithdrawT3") }}</div>
      <textarea
        :rows="2"
        class="input"
        v-model="address"
        :placeholder="title1"
        :rules="[{ required: true, message: title2 }]"
      />
      <div class="title top30">{{ i18n.global.t("WithdrawT4") }}</div>
      <div class="inputInfo">
        <input
          class="inputs"
          :placeholder="title3"
          :rules="[{ required: true, message: title4 }]"
          v-model="num"
        />
        <div @click="setAll">{{ i18n.global.t("WithdrawT5") }}</div>
      </div>

      <div class="title top30">{{ i18n.global.t("WithdrawT21") }}</div>
      <div class="inputInfo">
        <input
          class="inputs"
          :placeholder="title"
          :rules="[{ required: true, message: title4 }]"
          v-model="emailVerificationCode"
        />
        <div @click="getEmailCode">{{ i18n.global.t("MeT13") }}</div>
      </div>
      <!-- <div class="hintInfo">
        {{ i18n.global.t("WithdrawT6") }}
        <div style="flex: 1" />
        0.005%
      </div>
      <div class="hintInfo">
        {{ i18n.global.t("WithdrawT7") }}
        <div style="flex: 1" />
        2000 USDT
      </div> -->
      <div @click="doWithdraw" class="commitBtn">
        {{ i18n.global.t("WithdrawT8") }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a2c38;
  .top30 {
    margin-top: 30 * $_ru;
  }
  .content {
    padding: 126 * $_ru 30 * $_ru 20 * $_ru 30 * $_ru;
    .h20 {
      margin-top: 20 * $_ru;
    }
    .input {
      font-size: 24 * $_ru;
      background: transparent !important;
      border: 3 * $_ru solid #0f212e;
      width: 100%;
      padding: 20 * $_ru;
      margin-top: 20 * $_ru;
      border-radius: 8 * $_ru;
      color: #fff;
    }
    .commitBtn {
      margin-top: 50 * $_ru;
      padding: 20 * $_ru;
      background-color: #2e4d6f;
      font-size: 28 * $_ru;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12 * $_ru;
    }
    .hintInfo {
      margin-top: 20 * $_ru;
      display: flex;
      align-items: center;
      font-size: 24 * $_ru;
      color: #fff;
    }
    .inputInfo {
      display: flex;
      align-items: center;
      font-size: 24 * $_ru;
      background: transparent !important;
      border: 3 * $_ru solid #0f212e;
      padding: 20 * $_ru;
      margin-top: 20 * $_ru;
      border-radius: 8 * $_ru;
      color: #fff;
      .inputs {
        display: flex;
        flex: 1;
        font-size: 24 * $_ru;
        background: transparent !important;
        color: #fff;
      }
    }
    .title {
      font-size: 28 * $_ru;
      color: #fff;
      font-weight: 400;
    }

    .infoBox {
      background: #0f212e;
      padding: 20 * $_ru;
      border-radius: 18 * $_ru;
      margin-top: 20 * $_ru;
      display: flex;
      align-items: center;
      .img {
        width: 40 * $_ru;
        height: 40 * $_ru;
      }
      .txt {
        font-size: 24 * $_ru;
        color: #fff;
        margin-left: 20 * $_ru;
        font-size: 400;
      }
    }
  }
}
</style>
